<template>
  <div class="projectCalendar-box">
    <div class="mateCascader">
      <el-cascader
        v-model="cascaderValue"
        :props="defaultProps"
        :options="typeList"
        @change="selectType"
        >
      </el-cascader>
    </div>
    <div class="main">
      <el-row :gutter="20" type="flex">
        <el-col :span="12">
          <NewCard title="擅长领域">
            <ul class="field-box">
              <li v-for="(item,index) in expertise" :key="index" @click="rowclike(item,index)"
              :class="selectid==index?'isActive':''">
                {{item.name}}
              </li>
              
            </ul>
          </NewCard>
        </el-col>
        <el-col :span="12">
          <NewCard title="专家名单" :isright="true">
            <template #right>
              <el-input placeholder="专家姓名"
                      v-model="searchExpert" style="margin-right:10px;"></el-input>
              <el-button type="primary" round  @click="searchExpertFn(searchExpert)" class="searchBtn">搜索</el-button>
            </template>

            <!-- 表格 -->
            <el-table
              :data="expertList"
              :default-sort="{ prop: 'date', order: 'descending' }"
              highlight-current-row
              style="width: 100%"
              @row-click="getcurrent"
               @row-dblclick="selectExpert"
              ref="table">
              <el-table-column label="姓名" prop="name" ></el-table-column>
              <!-- <el-table-column label="未完成订单上限" width="120" prop="incomplete" sortable></el-table-column>
              <el-table-column label="月度订单限额" prop="quota" sortable></el-table-column> -->
              <el-table-column label="排序" prop="sort" sortable ></el-table-column>
            </el-table>
            
          </NewCard>
        </el-col>
        <!-- <el-col :span="8">
        <NewCard title="派工日历">
          <div class="index-calendar">
            <el-calendar v-model="value">
              <template slot="dateCell" slot-scope="{ date, data }">
                <p
                  :class="estState(date, data)"
                  @click="clickCale(date, $event, data)"
                  @dblclick="dbHoli(date, $event, data)"
                > -->
                  <!-- {{ data.day.split('-').slice(2).join('-') }} -->
                  <!-- {{ getDay(date) }}
                </p>
              </template>
            </el-calendar>
            <div class="rlExplain">
              <p>
                <i class="blueCircle"></i
                ><i class="redCircle"></i>蓝色代表可派工，红色代表请假(单击)
              </p>
              <p>
                <i class="yellowCircle"></i
                ><i class="grayCircle"></i>黄色代表调休，灰色代表周末(双击)
              </p>
              <p style="padding-left: 35px">灰色代表休息</p>
            </div>
          </div>
        </NewCard>
      </el-col> -->
      </el-row>
    </div>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import {
  getProjectTypelistApi,
  getprojectRuleApi
} from "@/wss/newApi_3-24/BK/hr/projectCalendar.js";
import {
  getCalendarListApi,
  getCalendarEditApi,
  getCalendarAddApi,
} from "@/wss/newApi_3-24/work/calendar.js";
export default {
  components:{NewCard},
  data(){
    return{
      selectid:0,
      defaultProps: {
        children: "children",
        label: "name",
        value: 'id',
      },
      typeList:[],//全部类别数据
      cascaderList:[],//级联两层类别数据
      cascaderValue:[],// 选择的类别
      scid:"",//三级类别ID

      searchExpert:"",//搜索
      threeList: [], //三级类别的列表
      expertise:[],
      calendarParams: {
        userId: "",
        expertId: "",
      },
   

      //派工日历
      value: new Date(),
      calendarList: [],
         //日历激活状态
      stateCalendar: 1, //1蓝色 或者 不选中 2红色休假 红色底白字 3灰色底
      holiday: false, //是否休假

      // 专家名单
      expertList:[
        // {
        //   name:'刘易阳',
        //   unfinished:'12',
        //   orderLimit:'17',
        //   sort:'1',
        // },
        // {
        //   name:'刘易阳1',
        //   unfinished:'18',
        //   orderLimit:'15',
        //   sort:'2',
        // },
        // {
        //   name:'刘易阳2',
        //   unfinished:'10',
        //   orderLimit:'11',
        //   sort:'3',
        // },
        // {
        //   name:'刘易阳3',
        //   unfinished:'4',
        //   orderLimit:'24',
        //   sort:'4',
        // },
      ],
    }
  },
  mounted(){
    //全部类别数据
    this.getProjectTypelistApiFn()
    
  },
  methods:{
    // 获取咨询类型
    async getProjectTypelistApiFn() {
      let { code, rows } = await getProjectTypelistApi();
      if (code != 200) return;
      this.typeList = JSON.parse(JSON.stringify(rows));
      this.threeList= JSON.parse(JSON.stringify(rows))
      // 级联两层类别数据
      this.cascaderList= this.typeList
      this.cascaderList.forEach(i=>{
        i.children.forEach(k=>this.$delete(k,'children'))
      })
      // // 级联选择器默认值
      // this.cascaderValue.push(this.typeList[0].id)
      // this.cascaderValue.push(this.typeList[0].children[0].id)

    },
    //获取三级类型数据
    selectType(id){
      this.selectid=id[id.length-1]
      console.log(id[id.length-1],"123")
      const ConsultTypeList =  this.threeList;
        let tree = null
        let currentItem  =null;
      ConsultTypeList.find((item) =>{
        console.log( item.children);
        if (item.children) {
       tree =   item.children.find(el => {
      //  console.log(el.id == id,"鼠標電子");
           if (el.id == id[id.length-1]) {
             return true
           }
         });
         if (tree) {
            currentItem = tree
           return true
         }
        }
      });
      this.expertise = currentItem.children;
    },
    rowclike(item,index){
      this.selectid=index
      this.scid=item.id
      console.log(item,"item")
      this.getprojectRuleApiFn()
    },

    async getprojectRuleApiFn() {
      let { code, rows } = await getprojectRuleApi({typeId:this.scid,name:this.searchExpert});
      if (code != 200) return;
      this.expertList = JSON.parse(JSON.stringify(rows));
    },
    //专家名单的搜索
     async searchExpertFn(val) {
      const _this = this;
      // _this.getExpertParams.name = _this.searchExpert;
      this.searchExpert=val
      await _this.getprojectRuleApiFn();
    },
 
    // ****************************派工日历****************************
    //标注今天日期
    getDay(data) {
      return data.getDate();
    },
    //初始化周末为灰色底 是否休假
    estState(date, data) {
      let flag = this.calendarList.find((item) => {
        // console.log(item.calendarDate == currentDate);
        // console.log(item.calendarDate);
        if (item.calendarDate == data.day) {
          data.id = item.id;
          return true;
        }
      });

      if (flag?.status == 1) {
        return "bg-work";
      } else if (flag?.status == 2) {
        return "bg-festival";
      } else if (flag?.status == 3) {
        return "bg-holiday";
      } else if (flag?.status == 4) {
        return "bg-dayOff";
      } else if (date.getDay() === 6 || date.getDay() === 0) {
        return "bg-week";
        // 没有id就是没有安排的
      } else if (!data.id) {
        // return "bg-unArrange";
      }
    },

    //单击日历选中状态
    async clickCale(date, e, data) {
      // 没有选择专家点击日历直接退出
      if (!this.expertId) return;

      setTimeout(async () => {
        // 是双击直接退出
        if (this.isDouble) return;

        // 修改
        if (data.id) {
          let editItem = this.getEditItem(data);
          let calendarParams = JSON.parse(JSON.stringify(this.calendarParams));
          // 直接复制引用地址
          calendarParams = editItem;
          calendarParams.calendarDate = data.day;
          calendarParams.expertId = this.expertId;
          let classList = e.target.classList;

          if (
            classList.contains("bg-holiday") ||
            classList.contains("bg-dayOff")
          ) {
            calendarParams.status = 1;
          } else {
            calendarParams.status = 3;
          }
          this.getCalendarEditFn(calendarParams);
          // 添加
        } else {
          let { code, msg } = await getCalendarAddApi({
            expertId: this.expertId,
            calendarDate: data.day,
            status: 1,
          });
          if (code != 200) return;
          this.getCalendarListFn();
        }
      }, 1000);
    },

    // 修改
    async getCalendarEditFn(calendarParams) {
      let { code, msg } = await getCalendarEditApi(calendarParams);
      console.log(msg);
      if (code != 200) {
        this.$message({
          type: "warming",
          message: msg,
        });
      }
    },
    // 获取当前编辑的哪一项
    getEditItem(data) {
      return this.calendarList.find((item) => {
        return item.id == data.id;
      });
    },
    //双击日历改为休假状态
    async dbHoli(date, e, data) {
      // 没有选择专家点击日历直接退出
      if (!this.expertId) return;
      this.isDouble = true;
      let editItem = this.getEditItem(data);

      let calendarParams = JSON.parse(JSON.stringify(this.calendarParams));
      calendarParams = editItem;
      if (editItem) {
        let status = calendarParams.status;
        calendarParams.expertId = this.expertId;
        calendarParams.calendarDate = data.day;
        // let classList = e.target.classList;

        if (status == 4) {
          calendarParams.status = 2;
        } else {
          calendarParams.status = 4;
          //  calendarParams.status = 4;
          // calendarParams.status = 3;
        }

        this.getCalendarEditFn(calendarParams);
      } else {
        let { code, msg } = await getCalendarAddApi({
          expertId: this.expertId,
          calendarDate: data.day,
          status: 2,
        });
        if (code != 200) return;
        this.getCalendarListFn();
      }
      setTimeout(() => {
        this.isDouble = false;
      }, 1000);
    },
    selectExpert(row) {
      console.log(row);
      this.calendarParams.expertId = row.id;
      this.calendarList = [];
      this.expertId = row.id;
      this.getCalendarListFn();
    },
    // 获取当前行数
    getcurrent(item) {
      this.currentEdititem = JSON.parse(JSON.stringify(item));
    },
   
    // 获取日历类型
    async getCalendarListFn() {
      let { all, user } = await getCalendarListApi(this.calendarParams);

      this.calendarList = JSON.parse(JSON.stringify(user));
    },

  }
};
</script>

<style scoped>
h3,h4,ul,li,p{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 级联选择器 */
.mateCascader{
  /* height: 6%; */
  margin-bottom: 20px;
}
::v-deep .el-cascader .el-input__inner{
  width: 200px;
  border:0;
  background-color: transparent;
  padding-left: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2E3F5E;
}
::v-deep .el-cascader .el-icon-arrow-down{
  color: #2E3F5E;
}
::v-deep .el-cascader .el-icon-arrow-down:before{
  content: '\E790';
}

/* 内容 */
.projectCalendar-box{
  height: 100%;
}
.main{
  height: calc(100% - 60px);
}
.main .el-row{
  height: 100%;
}
>>> .main .el-card__body{
  height: 100%;
}
>>> .main .el-card__body>div{
  height: 92%;
  overflow-y: auto;
}
>>> .main .el-card__body>div::-webkit-scrollbar{
  width: 0;
}

/* 擅长领域 */
.field-box li{
  color: #2E3F5E;
  line-height: 44px;
  font-size: 14px;
  padding: 0 15px;
  cursor: pointer;
}
.field-box li:hover{
  
  background-color: #E8F4FF;

}
.field-box li.isActive{
  background-color: #EBECF0;
}

/* 专家名单 */
.searchBtn{
  padding: 8px 20px;
  background-color: #F87A23;
  border-color: #F87A23;
}
.el-table >>> table,
.el-table >>> .el-table__empty-block {
  width: 100% !important;
  table-layout: fixed !important;
}
.el-table >>> th > .cell {
  position: relative;
}
.el-table >>> th > .cell .caret-wrapper{
  position: absolute;
  right: 0;
  top: -5px;
}
.el-table >>> .cell {
}
.el-table >>> .el-table__body tr > td{
  color: #2E3F5E;
}
.el-table >>> .el-table__body tr.current-row > td {
  background-color: #EBECF0;
}
.el-table >>> .el-table__header-wrapper {
  margin: 6px 0;
}
.el-table >>> .el-table__header-wrapper th,
.el-table >>> .el-table__fixed-header-wrapper th {
  background-color: #fff !important;
  border-bottom: 1px solid #EBEEF5;
  padding: 0;
}
.el-table >>> .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
}
.el-table::before {
  height: 0;
}

/* 派工日历 样式 */
.rlExplain {
  font-size: 12px;
}
.rlExplain p {
  display: flex;
  align-items: center;
  margin: 0;
}
.rlExplain i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-left: 5px;
  margin-right: 3px;
}
.rlExplain i.blueCircle {
  background-color: #409eff;
}
.rlExplain i.grayCircle {
  background-color: gray;
}
.rlExplain i.yellowCircle {
  background-color: yellow;
}
.rlExplain i.redCircle {
  background-color: #f56c6c;
}
.index-calendar >>> .el-calendar__header {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0px 0 0;
  border-bottom: 0;
}
.index-calendar >>> .el-button--mini {
  padding: 7px;
}
.index-calendar >>> .el-calendar__body {
  padding: 12px 0px;
}
.index-calendar >>> .el-calendar__header > .el-calendar__title {
  width: 35%;
}
.index-calendar >>> .el-calendar__header > .el-calendar__button-group {
  width: 55%;
}
.index-calendar >>> .el-calendar__header .el-calendar__button-group {
  display: flex;
  justify-content: flex-end;
}

.index-calendar >>> .el-calendar-table tr td:first-child,
.index-calendar >>> .el-calendar-table td {
  border: 0;
}

.index-calendar >>> .el-calendar-table td.is-selected {
  background-color: #fff;
}

.index-calendar >>> .el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  padding: 0;
  position: relative;
}

.index-calendar >>> .el-calendar-table .el-calendar-day:hover {
  background-color: #fff;
}
.backlog {
  position: absolute;
  top: 4.75%;
  left: 80px;
  display: block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f56c6c;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p {
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #fff;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p:hover {
  background-color: #f2f8fe;
}

.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-week {
  background-color: #f2f2f2;
}

.index-calendar >>> .el-calendar-table td.is-today .el-calendar-day p {
  border: 1px solid #409eff;
}

.index-calendar >>> .el-calendar-table td.is-selected .el-calendar-day p {
  color: #fff;
  background-color: #409eff;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-work {
  color: #fff;
  background-color: #409eff;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-dayOff {
  color: #fff;
  background-color: yellow;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-festival {
  position: relative;
}
.index-calendar
  >>> .el-calendar-table
  td
  .el-calendar-day
  p.bg-festival::after {
  display: block;
  font-size: 11px;
  content: "休";
  top: -10px;
  color: black;
  right: 0px;
  position: absolute;
}
.index-calendar >>> .el-calendar-table td .el-calendar-day p.bg-holiday {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

/* 派工日历 end*/
</style>
<style>
.el-cascader-node.in-active-path, 
.el-cascader-node.is-selectable.in-checked-path, 
.el-cascader-node.is-active{
  color: #F87A23;
}
</style>